<template>
  <div>
    <!-- header负责头部效果-->
    <!-- 内容1 -->
    <div class="part01">
        <Navigation></Navigation>
    </div>
    <!-- 内容2 -->
    <div class="part02 wrapper">
        <!-- 轮播图 -->
        <div class="banner">
            <Show></Show>
        </div>
        <!-- 新闻 -->
        <div class="new">
            <div class="new_list">
                <ul>
                    <li>通知公告</li>
                </ul>
            </div>
            <div class="new_con">
                <div class="item">
                    <ul>
                        <li>

                            <a href="javascript:;">
                                <p>开通考试通知<span>2022-3-27</span></p>
                            </a>
                        </li>
                        <li>

                            <a href="javascript:;">
                                <p>开通考试通知<span>2022-3-27</span></p>
                            </a>
                        </li>
                        <li>

                            <a href="javascript:;">
                                <p>开通考试通知<span>2022-3-27</span></p>
                            </a>
                        </li>
                        <li>

                            <a href="javascript:;">
                                <p>开通考试通知<span>2022-3-27</span></p>
                            </a>
                        </li>
                        <li>

                            <a href="javascript:;">
                                <p>开通考试通知<span>2022-3-27</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 功能 -->
        <div class="box">
            <ul>
                <li>
                    <img src="../assets/yuedu.png" alt=""> 文章阅读
                </li>
                <li>
                    <img src="../assets/yunxiazai.png" alt=""> 资源下载
                </li>
                <li>
                    <img src="../assets/wode.png" alt=""> 我的资源
                </li>
            </ul>

        </div>
    </div>

</div>
</template>

<script>
import Navigation from '../components/navigation'
import Show from '../components/show.vue'
export default {
    name:'home',
    components: {
    Navigation,
    Show
  }
}
</script>

<style>
.part01 {
    width: 100%;
    height: 500px;
    background-image: url(../assets/background.png);
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
}
.part02 {
    width: 90%;
    height: 310px;
    /* background-color: pink; */
    padding: 45px 0px 20px;
}

.banner {
    float: left;
    width: 400px;
    height: 230px;
}


.new {
    float: left;
    margin-left: 20px;
    width: 400px;
    height: 230px;
    /* background-color: green; */
}

.new_list {
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid #24275a;
}

.new_list li {
    display: inline-block;
}



.new_con .item li a {
    display: block;
    width: 400px;
    height: 39.6px;
    line-height: 39.6px;
    background-color: #fff;
    color: #000;
}

.new_con .item li p {
    width: 100%;
    margin-left: 20px;
    float: left;
    font-size: 16px;
    color: #333;
}

.new_con .item li span{
    margin-right: 40px;
}

.new_con .item li :hover {
    color: red;
}


.new_con .item li span {
    float: right;
}

.box {
    float: left;
    margin-left: 20px;
    width: 250px;
    height: 230px;
}

.box ul {
    margin-top: 53px;
    /* padding: 0px 50px; */
    /* width: 400px; */
}

.box li {
    float: left;
    margin-bottom: 30px;
    margin-right: 10px;
    margin-left: 10px;
    width: 60px;
    height: 60px;
    border-radius: 7px;
    font-size: 14px;
    color: #666666;
    font-family: '微软雅黑';
    text-align: center;
    transition: all 0.5s;
}

.box li:hover {
    transform: scale(1.2);
    background-color: #cccccc;
}

.box li img {
    width: 60px;
    height: 60px;
}


  
</style>